<template>
  <div class="me">
    <div class="info">
			<div class="img-wrapper">
				<img src="https://szkj.shenzhoutongbao.cn/images/normal.png" alt="">
			</div>
			<!-- <router-link tag="div" class="nickname-wrapper" to="/userdetail">
				<p class="phone">{{userInfo.name}}</p>
				
				<p class="phone">{{userInfo.cellphone | phoneFormat}}</p>
				<i class="zhlf-19 icon"></i>
			</router-link> -->
			<div>
				<div class="nickname-wrapper">
					<p class="phone">{{userInfo.name}}</p>
					<p v-if="userInfo.auth==1" class="shiming"><i class="iconfont icon-kefujingli-"></i> 已实名</p>
					<p v-else class="shiming">未实名</p>
				</div>
				<div class="phone1">
					<p>{{userInfo.cellphone}}</p>
				</div>
			</div>
		</div>
		<!-- <div class="order-menu">
			<div class="order-title">
				<div class="my-orders">我的订单</div>
				<div class="others">
					查看全部
					<i class="zhlf-17"></i>	
				</div>
			</div>
		</div>
		<div class="top-menu">
			<div class="top-menu-item">
				<i class="zhlf-15 gray"></i>	
				<span class="title">待付款</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-4 gray"></i>	
				<span class="title">待分享</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-21 gray"></i>	
				<span class="title">待发货</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-2 gray"></i>	
				<span class="title">待收货</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-uniE902 gray"></i>	
				<span class="title">待评价</span>
			</div>
		</div>
		<div class="middle-menu top-menu">
			<div class="top-menu-item">
				<i class="zhlf-16 red"></i>	
				<span class="title">优惠券</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-20 red"></i>	
				<span class="title">商品收藏</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-3 red"></i>	
				<span class="title">店铺收藏</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-7 red"></i>	
				<span class="title">历史浏览</span>
			</div>
			<div class="top-menu-item">
				<i class="zhlf-14 red"></i>	
				<span class="title">退款售后</span>
			</div>
		</div> -->
		<div class="bottom-menu">
			<!-- <router-link to="/identity" tag="div" class="bottom-menu-item">
				<i class="zhlf-13 yellow"></i>
				<span>实名认证</span>
				<i class="zhlf-17 right"></i>
			</router-link> -->

			<div class="bottom-menu-item" @click="callPhone()">
				<i class="iconfont icon-lianxiwomen1 yellow"></i>
				<span>联系我们</span>
				<i class="iconfont icon-right_3 right"></i>
			</div>
			<router-link to="/about" tag="div" class="bottom-menu-item">
				<i class="iconfont icon-guanyuwomen yellow"></i>
				<span>关于我们</span>
				<i class="iconfont icon-right_3 right"></i>
			</router-link>
			<!-- <router-link to="/setting" tag="div" class="bottom-menu-item">
				<i class="zhlf-12 yellow"></i>
				<span>设置</span>
				<i class="zhlf-17 right"></i>
			</router-link> -->
		</div>
		<div class="middle-menu top-menu">
			<div class="top-menu-item"  @click="delLoginOut">
				<span class="title">退出登录</span>
			</div>
		</div>	
  </div>
</template>

<script>
import { getUserInFo , getUrlContract } from "./../../api/index";
import { Toast , MessageBox } from 'mint-ui'
//import {mapState} from 'vuex'
import {mapActions} from 'vuex'

export default {
  name: 'MeTop',
  data () {
    return {
		userInfo:{}
    }
  },
  created() {
    this.getUserInFo();
  },
  methods:{
    ...mapActions(["Logout","asyncgetUserInFo"]),
	//...mapState(["userInfo"]),
    delLoginOut() {
        MessageBox.confirm('确定要退出登录吗').then(action => {
            // console.log(action);
            if("confirm" === action) {
				this.Logout({});  //请求接口
				//返回主界面
                this.$router.push('/login') 

                //this.Logout({});  //请求接口
            //   Logout().then(response => {
            //     this.asyncLogout();
            //    //返回主界面
            //    this.$router.push('/login') 
            //   }).catch(()=>{});
            }
        }).catch(()=>{});
    },
	getUserInFo(){
		getUserInFo().then(response => {
			//commit(USER_INFO, { userInfo: response.msg });
			if(response.data.auth!="1"){
				 //返回主界面
            	 this.$router.push('/verified') 
			}else{
				this.userInfo = response.data
				//获取签署合同URL
				//this.getUrlContract()
			}
			this.asyncgetUserInFo();
		}).catch(()=>{});
	},
	// getUrlContract(){
	// 	getUrlContract().then(response => {
	// 		location.href = response.data.url;
	// 	}).catch(()=>{});
	// },
	callPhone(){
		window.location.href = 'tel://40088-65123'
	}
},
filters:{
	// phoneFormat(phone){
	// 	//过滤手机号码

	// 	let phoneArray = [...phone]; //字符串转化成数组
	// 	let str = ''
	// 	phoneArray.forEach((item,index)=> {
	// 		if(index === 3 || index === 4 || index === 5 || index === 6) {
	// 				str += '*'
	// 		}else {
	// 			str += item
	// 		}
	// 	})
	// 	return str
	// }
}
//   components:{
//     MeCommonCell
//   }
}

//   export default {
// 		name: "MeTop",
// 		computed:{
// 			...mapState(['userInfo'])
// 		},
// 		filters:{
// 			phoneFormat(phone){
// 				//过滤手机号码
// 				let phoneArray = [...phone]; //字符串转化成数组
// 				let str = ''
// 				phoneArray.forEach((item,index)=> {
// 					if(index === 3 || index === 4 || index === 5 || index === 6) {
// 							str += '*'
// 					}else {
// 						str += item
// 					}
// 				})
// 				return str
// 			}
// 		}
//   }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
	.info
		width 100%
		background white
		display flex
		flex-direction row
		align-items center
		padding 20px
		font-size 14px
		.img-wrapper
			border-radius 50%
			width 80px
			height 80px
			margin-right 20px
			overflow hidden
			background-color #fafafa
			background-size contain	
			img
				display block
				width 80px
				height 80px
				border-radius 50%
		.nickname-wrapper
			display flex
			flex-direction row
			align-items center
			.phone
				font-size 20px
				color #151516
				padding-right 20px
			.shiming
				color #0077ff
		.phone1
			padding-top 15px	
			.icon
				padding-left 10px
				font-size 30px
				color #12b7f6
	.order-menu
		background white
		padding 10px 20px
		.order-title
			display flex
			flex-direction row
			justify-content space-between
			.my-orders
				font-size 17px
				color #151516
			.others
				font-size 14px
				color #999
	.top-menu
		padding 15px 20px
		background white
		margin-top 30px
		.top-menu-item
			display flex
			flex-direction column
			align-items center
			.title
				font-size 14px
				color #0077ff
	.bottom-menu
		margin-top 10px
		display flex
		flex-direction row
		justify-content space-between
		flex-wrap wrap
		/* padding-top 20px */
		background white
		.bottom-menu-item
			width 100%
			display flex
			/* flex-direction column */
			align-items center
			padding 15px 5px 15px 0
			margin-left 20px
			border-bottom 1px solid #ddd
			.yellow
				color #0077ff
				font-size 22px
				padding-right 10px
				/* padding-bottom 5px */
			span
				font-weight normal
				font-size 14px
				color #58595b
				width 100%
			.right
				color #ccc
		:last-child
			border 0 none
</style>
